<template>
    <el-dialog :visible="show"
               title="图片上传"
               width="700px"
               :close-on-click-modal="false"
               @close="onDialogClose"
    >
        <el-tabs>
            <el-tab-pane label="本地上传">
                <app-upload-upload ref="upload"/>
            </el-tab-pane>
            <el-tab-pane label="相册选择">
                <app-upload-photo ref="photo"/>
            </el-tab-pane>
        </el-tabs>

        <div slot="footer">
            <el-button @click="onClickCancel">取消</el-button>
            <el-button type="primary" @click="onClickConfirm">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import AppUploadUpload from '@/components/app-upload/component/upload.vue';
import AppUploadPhoto from '@/components/app-upload/component/photo.vue';
import { UploadDialogModule } from '@/components/app-upload/store';

@Component({ name: 'AppUpload',
    components: { AppUploadPhoto, AppUploadUpload }
})
export default class AppUpload extends Vue {
    private get show(): boolean {
        return UploadDialogModule.visible;
    }

    mounted() {
    }

    private get multi(): boolean {
        return !!UploadDialogModule.info.multi;
    }

    @Watch('show')
    onShowChange(val: boolean) {
        if (val) {
            this.$nextTick(() => {
                (this.$refs.photo as any).getList();
                UploadDialogModule.getGroup();
            });
        }
    }

    /**
     * 窗口关闭
     */
    private onDialogClose() {
        this.onClickCancel();
    }

    /**
     * 取消
     */
    private onClickCancel() {
        (this.$refs.upload as any).clearImages();
        (this.$refs.photo as any).clearSelected();
        UploadDialogModule.close();
        UploadDialogModule.dispose();
    }

    /**
     * 确认选择
     */
    private onClickConfirm() {
        if (UploadDialogModule.files.length === 0) {
            this.$message.error('请添加图片');
            return;
        }
        UploadDialogModule.callback();
        this.onClickCancel();
    }
}
</script>

<style scoped lang="scss" src="./style.scss"></style>
